<template>
  <!-- 系统设置模块-节点流转管理页面 -->
  <div class="fillcontain">
    <!-- 查询条件 -->
    <!-- <div class="fastQuery">
      <el-row>
        <el-col :span="2" class="fastQuery_title"><i class="el-icon-tickets"></i><span> 查询条件</span>
        </el-col>
        <el-col :span="10">
          <el-badge class="item fastQuery_item">
            <el-button size="small">全部</el-button>
          </el-badge>
          <el-badge :value="6" class="item fastQuery_item">
            <el-button size="small">预警</el-button>
          </el-badge>
          <el-badge :value="3" class="item fastQuery_item" type="warning">
            <el-button size="small">未完成任务</el-button>
          </el-badge>
        </el-col>
        <el-col :span="4" class="moreCondition">
          <span v-if="!isShow" @click="showorhide">更多条件 <i class="el-icon-d-arrow-right"></i></span>
          <span v-if="isShow" @click="showorhide">收起 <i class="el-icon-d-arrow-left"></i></span>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>
    </div> -->
    <el-form v-show="isShow" :model="searchParams"
             :rules="rules"
             ref="searchForm"
             label-width="100px"
             class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="归属业务：" prop="business">
            <el-col :span="24">
              <el-select v-model="searchParams.business" clearable placeholder="请选择">
                <el-option
                    v-for="item in busiTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="归属模块：" prop="module">
            <el-col :span="24">
              <el-select v-model="searchParams.module" clearable placeholder="请选择">
                <el-option
                    v-for="item in taskModules"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="节点名称：" prop="content">
            <el-input clearable v-model="searchParams.content" placeholder="节点名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="text_right">
          <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
          <el-button type="primary"
                     plain
                     icon="el-icon-refresh"
                     @click="resetSearch('searchForm')"></el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="contain">
      <div class="table_container">
        <el-table
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            header-cell-class-name="table-header-class"
            style="width:100%">
          <el-table-column
              property="routeid"
              label="节点编号"
              align='center'>
          </el-table-column>
          <el-table-column
              property="content"
              label="节点名称"
              align='center'>
          </el-table-column>
          <el-table-column
              property="business"
              label="归属业务"
              align='center'>
            <template slot-scope="scope">
              <span v-for="(item) in busiTypes"
                    v-if="scope.row.business==item.value">
                {{item.label}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
              property="module"
              label="归属模块"
              align='center'>
            <template slot-scope="scope">
              <span v-for="(item) in taskModules"
                    v-if="scope.row.module==item.value">
                {{item.label}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
              property="createId"
              label="创建人"
              align='center'>
          </el-table-column>
          <el-table-column
          min-width="160"
          show-overflow-tooltip
              property="nextNodes"
              label="下一流转节点"
              align='center'>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              align='center'>
            <template slot-scope="scope">
              <span class="operationIcon" @click="toNodeChange(scope.row.id)">
                <el-tooltip class="item" effect="light" content="流转设置" placement="top">
                  <i class="el-icon-setting"></i>  
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                  background
                  v-if='paginations.total > 0'
                  :page-sizes="paginations.pageSizes"
                  :page-size="paginations.pageSize"
                  :layout="paginations.layout"
                  :total="paginations.total"
                  :current-page='paginations.pageIndex'
                  @current-change='handleCurrentChange'
                  @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog title="节点流转设置" :visible.sync="dialogFormVisible" width="60%" center>
      <nodeChange v-if="dialogFormVisible"
                  v-bind:id="nodeChange_id"
                  @close="dialogFormVisible = false"
                  @getList="getList"></nodeChange>
    </el-dialog>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';
  import constant from '@/utils/constant';
  import {getNodeChangePage} from "@/api/setting";
  import nodeChange from "@/page/setting/nodeChange";

  export default {
    components: {
      nodeChange
    },
    data() {
      return {
        nodeChange_id: 0, // 节点流转ID
        dialogFormVisible: false,
        isShow: true,
        // 查询条件
        rules: {
          content: [],
          business: [],
          module: []
        },
        searchParams: {
          content: '', //节点名称
          business: '', //归属业务
          module: '', //归属模块
        },
        tableData: [],
        busiTypes: constant.busiTypes, // 归属业务
        taskModules: constant.taskModules, // 归属模块
        isPublish: constant.isPublish, // 是否发布
        loading: false,
        //需要给分页组件传的信息
        paginations: {
          total: 0,      // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,  // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        }
      }
    },
    // 视图未渲染
    created() {
    },
    // 视图已渲染完毕
    mounted() {
    },
    methods: {
      // 综合查询列表
      getList() {
        this.paginations.total = 0;
        this.tableData = [];
        let params = {
          "content": this.searchParams.content,
          "business": this.searchParams.business,
          "module": this.searchParams.module,
          "isPublish": 1, // 默认查询已发布的
          "pageSize": this.paginations.pageSize,
          "pageNumber": this.paginations.pageIndex,
          // "orderBy": "",
        };
        this.loading = true;
        getNodeChangePage(params).then(res => {
          this.loading = false;
          if (res.resultCode == constant.SUCCESS && res.data && res.data.total > 0) {
            this.paginations.total = res.data.total;
            this.tableData = res.data.rows;
          } else {
            this.tableData = [];
            this.initPaginations();
          }
        }).catch(err => {
          this.loading = false;
        });
      },
      // 更多条件
      showorhide() {
        this.isShow = !this.isShow;
      },
      // 点击流转设置
      toNodeChange(id) {
        this.nodeChange_id = id;
        this.dialogFormVisible = true;
      },
      // 重置分页条件
      initPaginations() {
        this.paginations.total = 0;
        this.paginations.pageIndex = 1;
      },
      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageIndex = 1;
        this.paginations.pageSize = pageSize;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.getList();
      },
      // 根据条件查询列表
      subGetList() {
        this.paginations.pageIndex = 1;
        this.getList();
      },
      // 清除查询条件
      resetSearch(formName) {
        this.$refs[formName].resetFields();
      }
    },
    computed: {
      ...mapGetters(['tags']),
      reload() {
        return this.$store.state.loading.reload;
      }
    },
    activated() {
      if (this.reload) {
        this.$store.dispatch('loading/CHNAGE_RELOAD', false)
        Object.assign(this.$data, this.$options.data());
      }
    }
  }
</script>
<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;

    .fastQuery {
      padding: 15px 20px 10px 20px;
      background: #fff;
      border-bottom: 1px solid #e1e1e1;

      .fastQuery_title {
        color: #666;
        padding: 6px 0px;
      }

      .fastQuery_item {
        margin: 0 10px;
      }

      .item_default {
        .el-button {
          color: #409EFF !important;
          border-color: #c6e2ff !important;
          background-color: #ecf5ff !important;
        }

      }

      .moreCondition {
        color: #68a3fc;
        cursor: pointer;
        padding: 6px 0px;

        .el-icon-d-arrow-right {
          transform: rotate(90deg);
        }

        .el-icon-d-arrow-left {
          transform: rotate(-90deg);
        }
      }
    }
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    // border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;
    color: #68a3fc;
  }

  .search_container {
    padding: 20px 20px 0 20px;
    // border-top: 1px solid #e1e1e1;
  }
</style>
